<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>菜单列表</title>
    <link rel="stylesheet" th:href="@{/src/css/layui.css}">
</head>
<body>
<br />
<div class="layui-btn-group TableTools" style="margin-left: 10px">
        <button class="layui-btn" id="addMenu">添加菜单</button>
        <button class="layui-btn" id="editMenu">编辑菜单</button>
        <button class="layui-btn layui-btn-danger" id="delMenu">删除菜单</button>
    <button class="layui-btn layui-btn-primary">（不选中为添加顶级菜单，选中添加子菜单）</button>
</div>
<div>
    <table class="layui-hidden" id="treeTable" lay-filter="treeTable"></table>
</div>

<script type="text/html" id="iconTel">
    {{# if(d.icon){ }}
        <i class="layui-icon">{{d.icon}}</i>
    {{#  }else{ }}

    {{# }  }}
</script>

<script th:src="@{/src/layui.js}"></script>
<script>

    layui.config({
        base:'/src/app/'
    }).use(['treeGrid','layer','jquery','laytpl'],function () {
        var treeGrid = layui.treeGrid,
            layer = layui.layer,
            laytpl = layui.laytpl,
            $ = layui.jquery;

        treeGrid.render({
            id:'treeTable',
            elem:'#treeTable',
            page:false,
            treeId:'id',
            treeUpId:'parentId',
            treeShowName:'title',
            url:'/menus/list',
            cols:[
                [
                    {type:'checkbox'},
                    {title:'菜单名',field:'title'},
                    {title:'菜单图标',field:'icon',templet:'#iconTel',width:100},
                    {title:'权限标识',field:'permission'},
                    {title:'菜单链接',field:'href'},
                    {title:'创建人',field:'adminName',width:100},
                    {title:'创建时间',field:'createTime'},
                    {title:'更新时间',field:'updateTime'}
                ]
            ]
        })
        
        //添加菜单
        $("#addMenu").click(function () {
            var checkStatus = treeGrid.checkStatus('treeTable');
            var data  = checkStatus.data;//获取选中行的数据
            if(data.length>1){
                layer.msg('只能选择一条数据',{icon:5});
                return ;
            }
            var parentId;

            if(data != ''){
                //获取当前行的节点菜单的Id
                parentId = data[0].id;
            }
            //如果没有勾选复选框，默认id的值为0；即是根节点。
            parentId = parentId==undefined?0:parentId;

            layer.open({
                type:2,
                title:'添加菜单',
                area:['400px','500px'],
                content:'/menus/addMenu/'+parentId
            })
        })

        //编辑菜单
        $('#editMenu').click(function () {
            var checkStatus = treeGrid.checkStatus('treeTable');
            var data = checkStatus.data;
            if (data.length > 1){
                layer.msg('只能选择一条数据',{icon:5});
                return ;
            }
            if (data.length < 1){
                layer.msg('请选择一条数据',{icon:5});
                return ;
            }
            //获取菜单id
            var menuId = data[0].id;
            layer.open({
                type:2,
                area:['400px','500px'],
                title:'编辑菜单',
                content:'/menus/editMenu/'+menuId
            })
        })
        //删除菜单
        $("#delMenu").click(function () {
            var checkStatus = treeGrid.checkStatus('treeTable');
            var data = checkStatus.data;

            if(data.length != 1){
                layer.msg('只能选择一条数据',{icon:5});
                return;
            }
            if(data != '' &&    data[0].title == '后台首页'){
                layer.msg("此条数据不能删除");
                return ;
            }
            $.ajax({
                url:'/menus/delete',
                type:'delete',
                data:{"id":data[0].id},
                dataType:'json',
                success:function (result) {
                    if(result.code == 200){
                        layer.msg(result.message,{icon:1,time:1000},function () {
                            treeGrid.reload('treeTable',{})
                        })
                    }else{
                        layer.msg(result.message,{icon:5});
                    }
                }
            })
        })
    })
</script>
</body>
</html>